<!-- 快速搜索 -->
<template>
  <div class="QuickSearch-wrap">
    <div class="search-name">
      <slot name="searchName">姓名  |</slot>
    </div>
    <input type="text" v-model="currentKey" class="search-input">
    <div class="search-btn" @click="onClick"><i class="el-icon-search"></i></div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';

  @Component({
    name: 'QuickSearch',
    components: {}
  })
  export default class QuickSearch extends Vue {
    private currentKey: any = '';
    @Emit()
    private onSearch(data: any) {
      return data;
    }
    private onClick() {
      this.onSearch(this.currentKey);
    }
  }
</script>
<style lang="less" scoped>
  .QuickSearch-wrap{
    position: absolute;
    left: 500px;
    top: 500px;
    background-color: rgba(0,33,56,1);
    box-shadow: 0 0 5px 2px rgba(26,169,243,.6);
    border-radius: 5px;
    border:1px solid  rgba(131,239,255,.7);
    .search-input{
      height: 40px;
      background-color: transparent;
      outline: none;
      border: none;
      padding-left: 62px;
      padding-right: 41px;
      font-size: 18px;
      color: #fff;
    }
    .search-name{
      position: absolute;
      left: 0;
      top:1px;
      width: 56px;
      height: 40px;
      line-height:40px;
      padding: 0 0 0 10px;
      color: #c2e7f2;
      font-size: 18px;
    }
    .search-btn{
      position: absolute;
      right:0;
      top: 1px;
      width: 41px;
      height: 40px;
      line-height: 40px;
      background: url('../../assets/img/tree/input_bg.png') no-repeat 0 50%;
      text-align:center;
      cursor: pointer;
      .el-icon-search{
        font-size: 22px;
        color: #7de5fa;
      }
    }
  }
</style>

